<template>
    <div style="width: 100%">
        <el-upload
            :multiple = "multiple"
            drag
            :action="action"
            :before-upload="beforeUpload"
            :http-request="upAdd"
            :auto-upload="true"
            :file-list="fileList"
            :on-change="upChange"
            :show-file-list="false"
            class="upload-file-uploader"
            ref="fileUpload"
            v-if="(!multiple && $props.uploadFiles.length === 0) || multiple"
        >
<!--            :headers="headers"-->
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-table :header-cell-style="{'text-align':'center'}" :data="$props.uploadFiles">
            <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center">
                <template #default="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="uid" v-if="false"/>
            <el-table-column label="文件名" prop="name"/>
            <el-table-column label="文件大小" prop="size" width="100px">
                <template #default="scope">
                    {{ formatFileSize(scope.row.size) }}
                </template>
            </el-table-column>
            <el-table-column label="MD5唯一标识" prop="md5"/>
            <el-table-column label="状态" prop="status" width="100px">
                <template #default="scope">
                    <dict-tag :options="upLoadSatus" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="进度" prop="progress">
                <template  #default="scope">
<!--                    type="circle"-->
                    <el-progress :text-inside="true"  style="color: rgba(73,114,248,0.87)" :stroke-width="20" :width="15" :percentage="scope.row.progress"></el-progress>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="60px">
                <template #default="scope">
                    <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                        <el-button link type="primary" icon="Delete" @click="upDelete(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>

import Worker from '@/plugins/upload.worker.js?worker'
import {getToken} from "@/utils/auth";
import {info} from "sass";

export default {
    name: "BigFileUpload",
    props:[
        'multiple', //多选
        'uploadFiles', //fft数据
    ],
    data:function () {
        return {
            multiple:true,
            fileList:[],
            // uploadFiles:[],
            uploadFileUrl:'',
            upLoadSatus:[{label:'等待中',value:'1'},{label:'正在计算MD5',value:'2'},{label:'正在上传',value:'3'},{label:'完成',value:'4'},{label:'失败',value:'5'}]
        }
    },
    methods:{
        beforeUpload(file){
            //console.log("上传之前："+JSON.stringify(this.fileList));
            return true;
        },
        setFileMd5(uid,md5){
            for (let i=0;i<this.$props.uploadFiles.length;i++){
                if (this.$props.uploadFiles[i].uid === uid){
                    this.$props.uploadFiles[i].md5 = md5
                    break
                }
            }
        },
        setFileProgress(uid,progress = 0){
            for (let i=0;i<this.$props.uploadFiles.length;i++){
                if (this.$props.uploadFiles[i].uid === uid){
                    this.$props.uploadFiles[i].progress = progress
                    break
                }
            }
        },
        setFileStatus(uid,status,filePath=''){
            for (let i=0;i<this.$props.uploadFiles.length;i++){
                if (this.$props.uploadFiles[i].uid === uid){
                    this.$props.uploadFiles[i].status = status
                    if (status === 2) this.$props.uploadFiles[i].progresscolor = 'green'
                    if (status === 3) this.$props.uploadFiles[i].progresscolor = 'blue'
                    if (status === 4) this.$props.uploadFiles[i].filePath = filePath
                    break
                }
            }
        },
        removeFile(uid){
            for (let i=0;i<this.$props.uploadFiles.length;i++){
                if (this.$props.uploadFiles[i].uid === uid){
                    this.$props.uploadFiles[i].uploadWork.terminate()
                    this.$props.uploadFiles.splice(i,1)
                    break
                }
            }
        },
        upDelete(row){
            for (let i=0;i<this.$props.uploadFiles.length;i++){
                if (this.$props.uploadFiles[i].uid === row.uid){
                    this.$props.uploadFiles[i].uploadWork.postMessage({cmd:2})
                    break
                }
            }
        },
        upAdd(param){
            //console.log('添加'+JSON.stringify(param.file))
            console.log("界面 的"+JSON.stringify(sessionStorage))
            let uploadFile = {}
            uploadFile.uid = param.file.uid;
            uploadFile.name = param.file.name;
            uploadFile.size = param.file.size;
            uploadFile.md5 = ''
            uploadFile.progress = 0;
            uploadFile.status = 1;
            uploadFile.uploadWork = new Worker();
            uploadFile.uploadWork.postMessage({cmd:1,uid:uploadFile.uid,file:param.file,token:getToken()})
            uploadFile.uploadWork.onmessage = e =>{
                let msgInfo = e.data
                if(msgInfo.uid === null) console.log('收到的uid为空:'+e.data.uid.uid)
                if(msgInfo.type === 1){
                    console.log('收到的状态:'+msgInfo.status)
                    if(msgInfo.status === 6){
                        //删除文件
                        this.removeFile(msgInfo.uid)
                    }else{
                        this.setFileStatus(msgInfo.uid,msgInfo.status,msgInfo.filePath)
                        if(msgInfo.status === 3) //md5获取完成 变为上传中
                            this.setFileMd5(msgInfo.uid,msgInfo.md5)

                    }
                }else if(msgInfo.type === 2){
                    this.setFileProgress(msgInfo.uid,msgInfo.progress)
                }
            }

            this.$props.uploadFiles.push(uploadFile)
        },
        formatFileSize(bytes, decimalPoint = 2) {
            if (bytes == 0) return "0 Bytes";
            let k = 1024,
                sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
                i = Math.floor(Math.log(bytes) / Math.log(k));
            return (
                parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + " " + sizes[i]
            );
        }
    },
}
</script>

<style scoped>

</style>